<template>
    <view class="change-paymentpassword-container">
        <u-gap height="40" bg-color="#FFFFFF"></u-gap>
        <view class="valid-mobile" v-show="step === 1">
            <u-form :model="validMobileForm" ref="validMobileForm">
                <u-form-item label-position="top">
                    <u-input v-model="validMobileForm.mobile" disabled label="已验证手机" placeholder="请输入手机号" maxlength="11" />
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="validMobileForm.captcha" placeholder="请输入图片验证码" maxlength="4" clearable />
                    <u-image slot="right" width="150" height="70" :src="valid_img_url" @click="getValidImgUrl"></u-image>
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="validMobileForm.sms_code" placeholder="请输入短信验证码" maxlength="6" clearable />
                    <u-button slot="right" type="error" size="mini" @click="getCode">{{codeTips}}</u-button>
                    <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
                </u-form-item>
            </u-form>
            <u-button :disabled="val_disabled_mobile" class="u-m-20" type="error" shape="circle" @click="submitValMobileForm">提交校验</u-button>
        </view>
        <view class="change-password" v-show="step === 2">
            <u-form :model="changePayMentPasswordForm" ref="changePayMentPasswordForm">
                <u-form-item label-position="top">
                    <u-input v-model="changePayMentPasswordForm.password" placeholder="请输入6位数字密码" type="password"
                        maxlength="6" clearable />
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="changePayMentPasswordForm.rep_password" placeholder="请确认密码" type="password" maxlength="6"
                        clearable />
                </u-form-item>
            </u-form>
            <u-button :disabled="val_disabled_password" class="u-m-20" type="error" shape="circle" @click="submitChangeForm">修改密码</u-button>
        </view>
    </view>
</template>

<script>
    import * as API_Common from '@/api/common'
    import * as API_Safe from '@/api/safe'
    import * as API_Deposit from '@/api/deposit'
    import Cache, { Keys } from '@/utils/cache'
    import { Foundation, RegExp } from '@/ui-utils/index'
    export default {
        data() {
            return {
                uuid: Cache.getItem('uuid'),
                step: 1,
                codeTips: '获取验证码',
                validMobileForm: {
                    scene: 'SET_PAY_PWD',
                    mobile: '',
                    uuid: '',
                    captcha: '',
                    sms_code: ''
                },
                valid_img_url: '',
                changePayMentPasswordForm: {
                    password: '',
                    rep_password: ''
                }
            };
        },
        onLoad() {
            this.GET_MemberAccount()
        },
        computed: {
            /** 校验手机号 按钮是否禁用 */
            val_disabled_mobile() {
                const { captcha, sms_code } = this.validMobileForm
                return !(captcha && sms_code)
            },
            /** 修改密码 按钮是否禁用 */
            val_disabled_password() {
                const { password, rep_password } = this.changePayMentPasswordForm
                return !(password && rep_password)
            }
        },
        methods: {
            /** 获取图片验证码URL */
            getValidImgUrl() {
                this.valid_img_url = API_Common.getValidateCodeUrl(this.validMobileForm.uuid, 'SET_PAY_PWD')
            },
            /** 获取账户信息 **/
            GET_MemberAccount() {
                API_Deposit.getMemberAccount().then(response =>{
                    this.validMobileForm.mobile = response.mobile
                    this.validMobileForm.uuid = response.uuid
                    this.getValidImgUrl()
                }).catch(error => {
                    if (error.data.code === '153') {
                        uni.showModal({
                            title: '提示',
                            content: '未绑定手机号，去绑定？',
                            confirmColor: '#ff5000',
                            confirmText: '去绑定',
                            success(res) {
                                if (res.confirm) {
                                     uni.redirectTo({url:"/pages/auth/bind-phone"})
                                } else {
                                    uni.navigateBack({
                                        delta:1
                                    })
                                }
                            }
                        })
                    }
                })
            },
            /** 获取验证码 */
            getCode() {
                const params = {
                    scene: this.validMobileForm.scene,
                    uuid: this.validMobileForm.uuid,
                    captcha: this.validMobileForm.captcha
                }
                if (!params.captcha) {
                    this.$u.toast('请填写图片验证码')
                    return
                }
                if (this.$refs.uCode.canGetCode) {
                    API_Safe.sendMobileSmsForPayment(params).then(res => {
                        this.$u.toast('验证码已发送')
                        this.$refs.uCode.start()
                    });
                } else {
                    this.$u.toast('倒计时结束后再发送')
                }
            },
            codeChange(text) {
                this.codeTips = text
            },
            /** 手机验证 */
            submitValMobileForm() {
                const { sms_code } = this.validMobileForm
                if (!sms_code) {
                    this.$u.toast('请填写短信验证码')
                    return
                }
                API_Safe.validChangePaymentPasswordSms(sms_code).then(() => {
                    this.step = 2
                    this.getValidImgUrl()
                }).catch(this.getValidImgUrl)
            },
            /** 修改密码 */
            submitChangeForm() {
                const { password, rep_password } = this.changePayMentPasswordForm
                const { uuid } = this.validMobileForm
                const params = {
                    uuid,
                    password
                }
                if (!/^\d{6}$/g.test(password)) {
                    this.$u.toast('密码格式不正确')
                    return false
                }
                if (password !== rep_password) {
                    this.$u.toast('两次密码输入不一致')
                    return false
                }
                API_Safe.bindPaymentPassword(params).then(() => {
                    uni.navigateBack()
                    this.$u.toast('密码修改成功')
                }).catch(this.getValidImgUrl)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .change-paymentpassword-container {

        .valid-mobile,
        .change-password {
            background-color: #FFFFFF;
            margin: 30rpx;
            border-radius: 20rpx;
            padding: 20rpx 40rpx;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        }
    }
</style>
